<template>
  	<div class="div">
    	<PageTitle title="活动商品列表" :addUrl="user_state == 1?'/activity/listDetail/'+id+'/none':''"></PageTitle>
    	<el-table stripe :data="tableData">
      		<el-table-column prop="fid" label="id" width="80"></el-table-column>
      		<el-table-column prop="fication_name" label="商品分类"></el-table-column>
			<el-table-column prop='' label="图片/视频">
				<template slot-scope="scope">
					<img
						v-if="scope.row.type!=0"
						:src="scope.row.url"
						@click="handlePictureCardPreview(scope.row.url)"
						class="list-img"
						width="150" height="150"
					/>
					<a v-else :href="scope.row.url" target="_blank">
						<video :src="scope.row.url" width="150" height="150"></video>
					</a>
				</template>
			</el-table-column>
      		<el-table-column label="活动商品">
        		<template slot-scope="scope">
					<p v-for="item in scope.row.goods_names" :key='item.id'>{{item.goods_name}}</p>
				</template>
      		</el-table-column>
      		
      		<el-table-column label="操作" v-if="user_state == 1">
				<template slot-scope="scope">
					<router-link :to="'/activity/listDetail/'+id+'/' + scope.row.fid" class="el-button el-button--text">查看</router-link>
					<!-- <el-button type="text" @click="qrcode(scope.row.id,scope.row.channel_name)">生成二维码</el-button> -->
					<el-button type="text" @click="del(scope.row.fid)">删除</el-button>
				</template>
      		</el-table-column>
    	</el-table>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" />
		</el-dialog>
    	<el-dialog :visible.sync="recordingShow" width="30%">
      		<div class="recording">
        		<h1>总共兑换用户：{{recordingData.length}}人</h1>
				<el-table :data="recordingData">
					<el-table-column property="create_at" label="领取日期" width="200"></el-table-column>
					<el-table-column property="nikname" label="领取用户"></el-table-column>
					<el-table-column property="username" label="引入者"></el-table-column>
				</el-table>
				
      		</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="recordingShow = false">取 消</el-button>
			</span>
    	</el-dialog>
  	</div>
</template>

<script>
	import PageTitle from "@/components/pageTitle/PageTitle.vue";
	import QRCode from "qrcodejs2";
	export default {
  		name: "RechargeList",
		components: {
			PageTitle,
		},
		activated() {
			this._getList();
			this.id = this.$route.params.id;
		},
  		data() {
			return {
				id: null,
				dialogImageUrl: "",
				dialogVisible: false,
				qrcodeShow: false,
				recordingShow: false,
				tableData: [],
				name: null,
				user_state: localStorage.getItem("user_state"),
				recordingData: [], //领取人数
			};
		},
		computed:{},
		methods: {
    		//获取活动列表
    		async _getList() {
      			let {data: { code, data }} = await this.$axios({
					url: this.$api + "/v1/channel/details",
					method: "GET",
					params: {
						id: this.$route.params.id,
						size: this.pageSize,
						page: this.pageNum,
					},
      			});
      			if (code === 0) {
        			if (data.items) {
						data.items.forEach(item=>{
							item.goods_names = item.goods_id.split(',').map(i=>{
								return data.data.filter(y=>{
									if (i == y.id) {
										return y
									}
								})[0]
							})
						})
						console.log('活动商品列表---------',data)
						this.tableData = data.items;
					} else {
						this.tableData = [];
					}
      			}else{
					this.tableData = [];
				}
    		},
    		del(id) {
      			this.$confirm("确认删除吗？", "提示", {
        			type: "warning",
      			}).then(() => {
        			this._del(id);
      			});
    		},
    		async _del(id) {
      			let {data: { code, data }} = await this.$axios({
					url: this.$api + "/v1/detailed/strike",
					method: "POST",
					data: {
						channel_id: this.$route.params.id,
						id: id,
					},
      			});
      			if (code == 0) {
					this.$message.success(data);
					this._getList();
      			}
    		},
  		},
	};
</script>

<style lang="scss" scoped>
@import "@/assets/css/select-bar.scss";
.list-img {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
.qrcode {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

</style>
